{% extends '@App/Layout.html.twig' %}
{% block body %}
    <!--内容-->
    <div class="jumbotron">
        <div class="container">
            <hgroup>
                <h1>[ 寻 人 平 台 ]</h1>
                <h4>禾木寻人平台是专业寻找失踪者的网络寻人服务平台。根据失踪原因的不同，如离家出走、迷路走失、被拐被骗、失散亲友、孤儿寻亲、流浪寻家、两岸寻亲等，让爱跨越空间与时间，带你回家！</h4>
            </hgroup>
        </div>
    </div>
    <div class="carousel slide " id="myCarousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="row">
                        {% for i in  0..2 %}
                        <div class="col-lg-4 col-md-4 col-xs-4 col-sm-4">
                            <div class="thumbnail"><!--缩略图情况下，图片自动响应-->
                                <a href="{{ path('personinfo', {'id':  case[i].Id }) }}"><img src="{{ case[i].PhotoUrl }}" alt=""></a>
                                <div class="caption">
                                    <a href="{{ path('personinfo', {'id':  case[i].Id }) }}"><h4>{{ case[i].FullName }} {{ case[i].HomeCity }}</h4>
                                        <p>{{ case[i].Age }} {{ case[i].Sex }} </p>
                                        <p class="overflow">{{ case[i].Description }}</p></a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <div class="row">
                        {% for i in  3..5 %}
                            <div class="col-lg-4 col-md-4 col-xs-4 col-sm-4">
                                <div class="thumbnail"><!--缩略图情况下，图片自动响应-->
                                    <a href="{{ path('personinfo', {'id':  case[i].Id }) }}"><img src="{{ case[i].PhotoUrl }}" alt=""></a>
                                    <div class="caption">
                                        <a href="{{ path('personinfo', {'id':  case[i].Id }) }}"><h4>{{ case[i].FullName }} {{ case[i].HomeCity }}</h4>
                                            <p>{{ case[i].Age }} {{ case[i].Sex }} </p>
                                            <p class="overflow">{{ case[i].Description }}</p></a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="item ">
                <div class="container">
                    <div class="row">
                        {% for i in  6..8 %}
                            <div class="col-lg-4 col-md-4 col-xs-4 col-sm-4">
                                <div class="thumbnail"><!--缩略图情况下，图片自动响应-->
                                    <a href="{{ path('personinfo', {'id':  case[i].Id }) }}"><img src="{{ case[i].PhotoUrl }}" alt=""></a>
                                    <div class="caption">
                                        <a href="{{ path('personinfo', {'id':  case[i].Id }) }}"><h4>{{ case[i].FullName }} {{ case[i].HomeCity }}</h4>
                                            <p>{{ case[i].Age }} {{ case[i].Sex }} </p>
                                            <p class="overflow">{{ case[i].Description }}</p></a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control left"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <!--首页内容介绍1-->
    <div class="tab1">
        <div class="container">
            <h2 class="tab-h2">最新寻人档案</h2>
            <p class="tab-p"></p>
            <!--两列两行或一行四列-->
            <div class="row">

                {% for case in case %}
                <div class="col-md-6">
                    <div class="media">
                        <div class="media-left">
                            <a href="{{ path('personinfo', {'id':  case.Id }) }}"><img src="{{ case.PhotoUrl }}" alt="" class="media-object "></a>
                        </div>
                        <div class="media-body">
                            <a href="{{ path('personinfo', {'id':  case.Id }) }}"><h4 class="media-heading">{{ case.FullName }} {{ case.HomeCity }}</h4></a>
                            <p class="text-muted">{{ case.Age }} {{ case.Sex }} </p>
                            <p class="text-muted overflow">{{ case.Description }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <!--首页内容介绍2  图片响应式：class="img-responsive"图片居中：center-block-->
    <div class="tab2">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6 tab2-img">
                    <a href="{{ path('case') }}"><img src="{{ asset('img/111.jpg') }}"class="auto img-responsive center-block" alt=""></a>
                </div>
                <div class="text col-md-6 col-sm-6 tab2-text" style="">
                    <a href="{{ path('case') }}"><h3>丰富的资源体系</h3>
                    <p>失踪人口档案汇聚，人口普查持续更新。</p></a>
                </div>
            </div>
        </div>
    </div>
    <div class="tab3">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <a href="{{ path('info') }}"><img src="{{ asset('img/2.jpg') }}" class="auto img-responsive center-block" alt=""></a>
                </div>
                <div class="text col-md-6 col-sm-6">
                    <a href="{{ path('info') }}"><h3>强大的网络追踪</h3>
                    <p>免费发布寻人信息，等我带你回家。</p></a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

